<template>
  <div class="collaborationLedger">
    <div v-if="!isShowDetails">
      <div class="myFixed">
        <PageTitle
          :goBack="false"
          title="项目采购台账"
          :border="true"
          class="myFixed1"
        />
      </div>
      <div style="padding-top: 45px">
        <div class="info-div" :style="{ paddingLeft: isShowBtn ? '52px' : '24px' }">
          <div class="info-left" @click="toLeft" v-show="isShowBtn">
            <img src="../../../assets/images/left-btn.png" alt="" />
          </div>
          <div id="info-listData" class="info-listData">
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon1.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">项目总数</div>
                <div class="value">{{ tzInfo.total }}</div>
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon2.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">水电</div>
                <div class="value"
                >{{
                    tzInfo.targetCategoryCounts.filter((item) => item.name === '水电').length
                      ? tzInfo.targetCategoryCounts.filter((item) => item.name === '水电')[0].count
                      : 0
                  }}
                  <label style="margin-left: 4px; font-size: 12px; color: #606266"
                  >占比{{
                      tzInfo.targetCategoryCounts.filter((item) => item.name === '水电').length
                        ? tzInfo.targetCategoryCounts.filter((item) => item.name === '水电')[0]
                          .percent
                        : 0
                    }}%</label
                  ></div
                >
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon3.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">科技研发</div>
                <div class="value"
                >{{
                    tzInfo.targetCategoryCounts.filter((item) => item.name === '科技研发').length
                      ? tzInfo.targetCategoryCounts.filter((item) => item.name === '科技研发')[0]
                        .count
                      : 0
                  }}
                  <label style="margin-left: 4px; font-size: 12px; color: #606266"
                  >占比{{
                      tzInfo.targetCategoryCounts.filter((item) => item.name === '科技研发').length
                        ? tzInfo.targetCategoryCounts.filter((item) => item.name === '科技研发')[0]
                          .percent
                        : 0
                    }}%</label
                  ></div
                >
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon5.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">信息化</div>
                <div class="value"
                >{{
                    tzInfo.targetCategoryCounts.filter((item) => item.name === '信息化').length
                      ? tzInfo.targetCategoryCounts.filter((item) => item.name === '信息化')[0].count
                      : 0
                  }}
                  <label style="margin-left: 4px; font-size: 12px; color: #606266"
                  >占比{{
                      tzInfo.targetCategoryCounts.filter((item) => item.name === '信息化').length
                        ? tzInfo.targetCategoryCounts.filter((item) => item.name === '信息化')[0]
                          .percent
                        : 0
                    }}%</label
                  ></div
                >
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon4.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">光伏</div>
                <div class="value"
                >{{
                    tzInfo.targetCategoryCounts.filter((item) => item.name === '光伏').length
                      ? tzInfo.targetCategoryCounts.filter((item) => item.name === '光伏')[0]
                        .count
                      : 0
                  }}
                  <label style="margin-left: 4px; font-size: 12px; color: #606266"
                  >占比{{
                      tzInfo.targetCategoryCounts.filter((item) => item.name === '光伏').length
                        ? tzInfo.targetCategoryCounts.filter((item) => item.name === '光伏')[0]
                          .percent
                        : 0
                    }}%</label
                  ></div
                >
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon5.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">风电</div>
                <div class="value"
                >{{
                    tzInfo.targetCategoryCounts.filter((item) => item.name === '风电').length
                      ? tzInfo.targetCategoryCounts.filter((item) => item.name === '风电')[0].count
                      : 0
                  }}
                  <label style="margin-left: 4px; font-size: 12px; color: #606266"
                  >占比{{
                      tzInfo.targetCategoryCounts.filter((item) => item.name === '风电').length
                        ? tzInfo.targetCategoryCounts.filter((item) => item.name === '风电')[0]
                          .percent
                        : 0
                    }}%</label
                  ></div
                >
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon7.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">办公综合</div>
                <div class="value"
                >{{
                    tzInfo.targetCategoryCounts.filter((item) => item.name === '办公综合').length
                      ? tzInfo.targetCategoryCounts.filter((item) => item.name === '办公综合')[0].count
                      : 0
                  }}
                  <label style="margin-left: 4px; font-size: 12px; color: #606266"
                  >占比{{
                      tzInfo.targetCategoryCounts.filter((item) => item.name === '办公综合').length
                        ? tzInfo.targetCategoryCounts.filter((item) => item.name === '办公综合')[0]
                          .percent
                        : 0
                    }}%</label
                  ></div
                >
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <img src="../../../assets/images/projectIcon/icon6.png" alt="" />
              </div>
              <div class="info-info">
                <div class="name">其他</div>
                <div class="value">
                  {{
                    tzInfo.targetCategoryCounts.filter((item) => item.name === '其他').length
                      ? tzInfo.targetCategoryCounts.filter((item) => item.name === '其他')[0].count
                      : 0
                  }}
                  <label style="margin-left: 4px; font-size: 12px; color: #606266"
                  >占比{{
                      tzInfo.targetCategoryCounts.filter((item) => item.name === '其他').length
                        ? tzInfo.targetCategoryCounts.filter((item) => item.name === '其他')[0]
                          .percent
                        : 0
                    }}%</label
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="info-right" @click="toRight" v-show="isShowBtn">
            <img src="../../../assets/images/left-btn.png" alt="" />
          </div>
        </div>
        <div class="myCardCss" style="width: 100%">
          <div class="searchDiv">
            <a-select
              v-model:value="formData.year"
              placeholder="年份"
              style="width: 120px; margin-right: 8px"
              allow-clear
              @change="searchData"
              mode="multiple"
              class="collaboration-a-select"
              :max-tag-count="1"
            >
              <a-select-option :value="2024">2024</a-select-option>
              <a-select-option :value="2023">2023</a-select-option>
              <a-select-option :value="2022">2022</a-select-option>
              <a-select-option :value="2021">2021</a-select-option>
              <a-select-option :value="2020">2020</a-select-option>
              <a-select-option :value="2019">2019</a-select-option>
              <a-select-option :value="2018">2018</a-select-option>
              <a-select-option :value="2017">2017</a-select-option>
              <a-select-option :value="2016">2016</a-select-option>
              <a-select-option :value="2015">2015</a-select-option>
              <a-select-option :value="2014">2014</a-select-option>
              <a-select-option :value="2013">2013</a-select-option>
              <a-select-option :value="2012">2012</a-select-option>
              <a-select-option :value="2011">2011</a-select-option>
              <a-select-option :value="2010">2010</a-select-option>
              <a-select-option :value="2009">2009</a-select-option>
              <a-select-option :value="2008">2008</a-select-option>
              <a-select-option :value="2007">2007</a-select-option>
              <a-select-option :value="2006">2006</a-select-option>
              <a-select-option :value="2005">2005</a-select-option>
              <a-select-option :value="2004">2004</a-select-option>
              <a-select-option :value="2003">2003</a-select-option>
              <a-select-option :value="2002">2002</a-select-option>
              <a-select-option :value="2001">2001</a-select-option>
              <a-select-option :value="2000">2000</a-select-option>
            </a-select>
            <a-select
              v-model:value="formData.targetCategory"
              placeholder="标的物类别"
              style="width: 120px; margin-right: 8px"
              allow-clear
              @change="searchData"
              mode="multiple"
              class="collaboration-a-select"
              :max-tag-count="1"
            >
              <a-select-option value="物资类">物资类</a-select-option>
              <a-select-option value="工程类">工程类</a-select-option>
              <a-select-option value="服务类">服务类</a-select-option>
              <!--            <a-select-option value="服务">服务</a-select-option>-->
              <!--            <a-select-option value="工程">工程</a-select-option>-->
              <!--            <a-select-option value="科研">科研</a-select-option>-->
              <!--            <a-select-option value="施工">施工</a-select-option>-->
              <!--            <a-select-option value="物资">物资</a-select-option>-->
              <!--            <a-select-option value="修理">修理</a-select-option>-->
              <!--            <a-select-option value="移民">移民</a-select-option>-->
            </a-select>
            <a-select
              v-model:value="formData.professionalSection"
              placeholder="专业板块"
              style="width: 120px; margin-right: 8px"
              allow-clear
              @change="searchData"
              mode="multiple"
              class="collaboration-a-select"
              :max-tag-count="1"
            >
              <a-select-option value="水电">水电</a-select-option>
              <a-select-option value="科技研发">科技研发</a-select-option>
              <a-select-option value="信息化">信息化</a-select-option>
              <a-select-option value="信息化">光伏</a-select-option>
              <a-select-option value="生产运维">风电</a-select-option>
              <a-select-option value="科研">办公综合</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
            <a-select
              v-model:value="formData.planType"
              placeholder="计划类型"
              style="width: 120px; margin-right: 8px"
              allow-clear
              @change="searchData"
              mode="multiple"
              class="collaboration-a-select"
              :max-tag-count="1"
            >
              <a-select-option value="常规计划">常规计划</a-select-option>
              <a-select-option value="紧急采购计划">紧急采购计划</a-select-option>
              <a-select-option value="零星采购计划">零星采购计划</a-select-option>
              <!--            <a-select-option value="线下补协">线下补协</a-select-option>-->
              <!--            <a-select-option value="线下续签">线下续签</a-select-option>-->
              <a-select-option value="直接采购计划">直接采购计划</a-select-option>
              <a-select-option value="直接采购计划">框架采购计划</a-select-option>
              <!--            <a-select-option value="直接签订">直接签订</a-select-option>-->
            </a-select>
            <a-select
              v-model:value="formData.projectPhase"
              placeholder="项目阶段"
              @change="searchData"
              allow-clear
              style="width: 160px; margin-right: 8px"
              mode="tags"
              class="collaboration-a-select"
              :max-tag-count="1"
            >
              <!--            <a-select-option value="采购已完成">采购已完成</a-select-option>-->
              <!--            <a-select-option value="科技研发">科技研发</a-select-option>-->
              <!--            <a-select-option value="前期">前期</a-select-option>-->
              <!--            <a-select-option value="生产">生产</a-select-option>-->
              <!--            <a-select-option value="生产运维">生产运维</a-select-option>-->
              <a-select-option value="项目前期">项目前期</a-select-option>
              <a-select-option value="基建">基建</a-select-option>
              <a-select-option value="生产检修技改运维">生产检修技改运维</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
            <a-select
              v-model:value="formData.winBidStatus"
              placeholder="供应商中标情况"
              @change="searchData"
              allow-clear
              style="width: 160px; margin-right: 8px"
              class="collaboration-a-select"
              :max-tag-count="1"
            >
              <a-select-option :value="1">已中标</a-select-option>
              <a-select-option :value="2">参与投标</a-select-option>
            </a-select>
<!--            <a-select-->
<!--              v-model:value="formData.tbqk"-->
<!--              placeholder="投标情况"-->
<!--              @change="searchData"-->
<!--              allow-clear-->
<!--              style="width: 120px; margin-right: 8px"-->
<!--              mode="tags"-->
<!--              class="collaboration-a-select"-->
<!--              :max-tag-count="1"-->
<!--            >-->
<!--              &lt;!&ndash;            <a-select-option value="采购已完成">采购已完成</a-select-option>&ndash;&gt;-->
<!--              &lt;!&ndash;            <a-select-option value="科技研发">科技研发</a-select-option>&ndash;&gt;-->
<!--              &lt;!&ndash;            <a-select-option value="前期">前期</a-select-option>&ndash;&gt;-->
<!--              &lt;!&ndash;            <a-select-option value="生产">生产</a-select-option>&ndash;&gt;-->
<!--              &lt;!&ndash;            <a-select-option value="生产运维">生产运维</a-select-option>&ndash;&gt;-->
<!--              <a-select-option value="已中标">已中标</a-select-option>-->
<!--              <a-select-option value="参与投标">参与投标</a-select-option>-->
<!--            </a-select>-->
            <a-input
              style="width: 240px; margin-right: 20px"
              placeholder="请输入关键字查询"
              @keyup.enter="searchData"
              allow-clear
              v-model:value="formData.keyword"
              class="collaboration-a-input"
            >
              <template #prefix>
                <SearchOutlined />
              </template>
            </a-input>
            <a-button
              type="primary"
              danger
              style="margin-right: 20px; border-radius: 4px"
              @click="searchData"
            >查询</a-button
            >
            <!--        <a-upload-->
            <!--          class="exportBtn"-->
            <!--          action=""-->
            <!--          :customRequest="uploadData"-->
            <!--          accept=""-->
            <!--          :max-count="1"-->
            <!--          :show-upload-list="false"-->
            <!--        >-->
            <!--          <div style="color: #1473dc" @click="openUpload"> 批量导入 </div>-->
            <!--        </a-upload>-->
            <div class="exportBtn all-4-border" style="color: #1473dc" @click="openUpload">
              批量导入
            </div>
          </div>
          <a-table
            class="detail-a-table__main"
            :dataSource="dataSource"
            :columns="columns"
            :pagination="false"
            :bordered="true"
            :scroll="{ x: 1000, y: 500 }"
          >
            <template #index="{ record, index }">
              {{ index + 1 + (pageForm.limit - 1) * pageForm.size }}
            </template>
            <template #winningBidder="{ record }">
              <label
                @click="openDetails(record.supplierId)"
                style="cursor: pointer"
                :style="{ color: record.supplierId !== '-' ? '#1473dc' : '' }"
              >{{record.winningBidder}}</label
              >
            </template>
            <template #companyName="{ record }">
              <label
                v-if="record.companyName !== '-'"
                style="cursor: pointer"
                @click="openDetails(record.companyId)"
                :style="{ color: record.companyId !== '-' ? '#1473dc' : '' }"
                v-html="getName(record.companyName)"
              ></label
              >
            </template>
            <template #planName="{ record }">
              <label
                v-html="getName(record.planName)"
              ></label
              >
            </template>
            <template #operation="{ record }">
              <a @click="openInfoBox(record)" style="color:#1473dc;margin-right: 8px">详情</a>
              <a @click="openDelBox(record)" style="color: red">删除</a>
            </template>
          </a-table>
          <a-pagination
            size="small"
            :total="pageForm.total"
            :pageSize="pageForm.size"
            :current="pageForm.limit"
            :hideOnSinglePage="true"
            :showSizeChanger="false"
            @change="changePage"
            style="margin-top: 10px; float: right"
          />
          <div style="clear: both"></div>
        </div>
      </div>
    </div>
    <a-modal
      v-model:visible="isShowUpload"
      :maskClosable="false"
      :width="600"
      :centered="true"
      :destroyOnClose="true"
      :okText="titleContent"
      title="批量导入"
      @ok="saveUpload"
    >
      <div class="my-upload">
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :multiple="true"
          action=""
          style="height: 500px"
          :beforeUpload="handleChange"
          :remove="removeFile"
        >
          <div class="ant-upload-hint" v-if="isUploadState === 0">
            <div class="upload-icon">
              <img src="../../../assets/images/upload.png" alt="" />
            </div>
            <div class="upload-click">
              <label style="color: #1473dc">点击选择</label
              ><label>或将文件（xls、xlsx）拖拽至此上传项目表格</label>
            </div>
          </div>
          <div class="ant-upload-hint" v-if="isUploadState === 1">
            <div class="upload-icon">
              <img src="../../../assets/images/success.png" alt="" />
            </div>
            <div class="upload-click" style="color: #303133"> 上传成功 </div>
          </div>
          <div class="ant-upload-hint" v-if="isUploadState === 2">
            <div class="upload-icon">
              <img src="../../../assets/images/error.png" alt="" />
            </div>
            <div class="upload-click" style="color: #303133"> 导入失败 </div>
            <div style="color: #909399">请使用标准导入模板进行数据导入，否则将无法导入成功</div>
          </div>
        </a-upload-dragger>
      </div>
      <div class="tips">
        <div class="tipsItem"
          >· 导入的文件内容必须依照下载模板的要求填写
          <div>
            <div class="downloadBtn">
              <img src="../../../assets/images/download.png" alt="" />
              <label @click="downloadData">点击下载</label>
            </div>
          </div></div
        >
        <div class="tipsItem">· 上传文件最大为2M，仅支持Excel表格文件（xls、xlsx）</div>
        <div class="tipsItem">· 导入重复数据将自动跳过</div>
      </div>
    </a-modal>
    <SupplierDetails v-if="isShowDetails" :company-id="companyId" @go-back="goBack" />
    <!-- 导入数据弹窗 -->
    <a-modal
      v-model:visible="isUploadDetails"
      :maskClosable="false"
      :width="1500"
      :centered="true"
      okText="完成"
      cancel-text="下载错误数据"
      title="批量导入"
      @ok="closeUploadDetails"
      @cancel="downErrorData"
      style="padding: 20px"
      :footer="false"
    >
      <div class="myTableClass">
        <div class="myHead">
          <div
            class="myCol"
            v-for="(headItem, index) in columnsByUpload"
            :key="index"
            :title="headItem"
          >
            {{ headItem }}
          </div>
        </div>
        <div class="myRow" v-for="(dataItem, index) in uploadData" :key="index">
          <div
            class="myCol"
            :class="!dataItem.valid ? 'active' : ''"
            v-for="(colItem, colIndex) in dataItem.columns"
            :key="colIndex"
            :title="colItem"
            >{{ colItem }}</div
          >
        </div>
      </div>
      <div class="footerBtn">
        <a-button @click="downErrorData" style="margin-right: 12px">下载错误数据</a-button>
        <a-button type="primary" danger @click="closeUploadDetails">完成</a-button>
      </div>
      <div style="clear: both"></div>
    </a-modal>
    <a-modal v-model:visible="isShowDelBox" title="提示" @ok="handleOk">
      <div style="padding: 20px">确定删除此项合作数据吗？</div>
    </a-modal>
    <a-modal v-model:visible="isShowInfo" title="项目采购台账详情" :footer="null" width="70%">
      <page-title title="基本信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="中标人">中标人</div>
        <div class="col value firstCol" :title="infoForm.winningBidder">{{infoForm.winningBidder}}</div>
        <div class="col name firstCol" title="合同名称">合同名称</div>
        <div class="col value firstCol" :title="infoForm.planName">{{infoForm.planName}}</div>
      </div>
      <div class="row">
        <div class="col name" title="项目公司">项目公司</div>
        <div class="col value" :title="infoForm.companyName">{{infoForm.companyName}}</div>
        <div class="col name" title="年份">年份</div>
        <div class="col value" :title="infoForm.year">{{infoForm.year}}</div>
      </div>
      <div class="row">
        <div class="col name" title="专业板块">专业板块</div>
        <div class="col value" :title="infoForm.professionalSection">{{infoForm.professionalSection}}</div>
        <div class="col name" title="合同类型">合同类型</div>
        <div class="col value" :title="infoForm.planType">{{infoForm.planType}}</div>
      </div>
      <div class="row">
        <div class="col name" title="是否为供应商短名单采购">是否为供应商短名单采购</div>
        <div class="col value" :title="infoForm.onSupplierShortlist">{{infoForm.onSupplierShortlist}}</div>
        <div class="col name" title="评审方式">评审方式</div>
        <div class="col value" :title="infoForm.evaluationMethod">{{infoForm.evaluationMethod}}</div>
      </div>
      <div class="row">
        <div class="col name" title="项目阶段">项目阶段</div>
        <div class="col value" :title="infoForm.projectPhase">{{infoForm.projectPhase}}</div>
        <div class="col name" style="background: white"></div>
        <div class="col value"></div>
      </div>
      <page-title title="招标信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="计划名称">计划名称</div>
        <div class="col value firstCol" :title="infoForm.planName">{{infoForm.planName}}</div>
        <div class="col name firstCol" title="采购依据（立项）">采购依据（立项）</div>
        <div class="col value firstCol" :title="infoForm.procurementBasis">{{infoForm.procurementBasis}}</div>
      </div>
      <div class="row">
        <div class="col name" title="计划类型">计划类型</div>
        <div class="col value" :title="infoForm.planType">{{infoForm.planType}}</div>
        <div class="col name" title="标包名称">标包名称</div>
        <div class="col value" :title="infoForm.packageName">{{infoForm.packageName}}</div>
      </div>
      <div class="row">
        <div class="col name" title="标的物类别">标的物类别</div>
        <div class="col value" :title="infoForm.targetCategory">{{infoForm.targetCategory}}</div>
        <div class="col name" title="概（预）算金额（万元）">概（预）算金额（万元）</div>
        <div class="col value" :title="infoForm.budgetAmount">{{infoForm.budgetAmount}}</div>
      </div>
      <div class="row">
        <div class="col name" title="采购与招标管理机构">采购与招标管理机构</div>
        <div class="col value" :title="infoForm.procurementAgencyType">{{infoForm.procurementAgencyType}}</div>
        <div class="col name" title="采购方式">采购方式</div>
        <div class="col value" :title="infoForm.procurementMethod">{{infoForm.procurementMethod}}</div>
      </div>
      <div class="row">
        <div class="col name" title="采购代理机构名称">采购代理机构名称</div>
        <div class="col value" :title="infoForm.procurementAgencyName">{{infoForm.procurementAgencyName}}</div>
        <div class="col name" title="招标（非招标）编号">招标（非招标）编号</div>
        <div class="col value" :title="infoForm.tenderNumber">{{infoForm.tenderNumber}}</div>
      </div>
      <div class="row">
        <div class="col name" title="最高限价（万元）">最高限价（万元）</div>
        <div class="col value" :title="infoForm.maximumPrice">{{infoForm.maximumPrice}}</div>
        <div class="col name" title="实际开标/询价/竞价/谈判时间">实际开标/询价/竞价/谈判时间</div>
        <div class="col value" :title="infoForm.bidOpeningDate">{{infoForm.bidOpeningDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="二次挂网时间">二次挂网时间</div>
        <div class="col value" :title="infoForm.secondPostingDate">{{infoForm.secondPostingDate}}</div>
        <div class="col name" title="实际开标/询价/竞价/谈判时间">实际开标/询价/竞价/谈判时间</div>
        <div class="col value" :title="infoForm.bidOpeningDate2">{{infoForm.bidOpeningDate2}}</div>
      </div>
      <div class="row">
        <div class="col name" title="三次挂网时间">三次挂网时间</div>
        <div class="col value" :title="infoForm.thirdPostingDate">{{infoForm.thirdPostingDate}}</div>
        <div class="col name" title="实际开标/询价/竞价/谈判时间">实际开标/询价/竞价/谈判时间</div>
        <div class="col value" :title="infoForm.bidOpeningDate3">{{infoForm.bidOpeningDate3}}</div>
      </div>
      <page-title title="中标信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="首选中标人">首选中标人</div>
        <div class="col value firstCol" :title="infoForm.firstChoiceBidder">{{infoForm.firstChoiceBidder}}</div>
        <div class="col name firstCol" title="备选中标人">备选中标人</div>
        <div class="col value firstCol" :title="infoForm.secondChoiceBidder">{{infoForm.secondChoiceBidder}}</div>
      </div>
      <div class="row">
        <div class="col name" title="排序第三候选人（如果有）">排序第三候选人（如果有）</div>
        <div class="col value" :title="infoForm.thirdChoiceBidder">{{infoForm.thirdChoiceBidder}}</div>
        <div class="col name" title="定标时间">定标时间</div>
        <div class="col value" :title="infoForm.awardDate">{{infoForm.awardDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="定标会议">定标会议</div>
        <div class="col value" :title="infoForm.awardMeeting">{{infoForm.awardMeeting}}</div>
        <div class="col name" title="是否有异议或投诉">是否有异议或投诉</div>
        <div class="col value" :title="infoForm.objectionsOrComplaints">{{infoForm.objectionsOrComplaints}}</div>
      </div>
      <div class="row">
        <div class="col name" title="中标人">中标人</div>
        <div class="col value" :title="infoForm.winningBidder">{{infoForm.winningBidder}}</div>
        <div class="col name" title="中标通知书下发时间">中标通知书下发时间</div>
        <div class="col value" :title="infoForm.awardNotificationDate">{{infoForm.awardNotificationDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="中标/中选金额（万元）">中标/中选金额（万元）</div>
        <div class="col value" :title="infoForm.winningAmount">{{infoForm.winningAmount}}</div>
        <div class="col name" title="是否招标转谈判采购">是否招标转谈判采购</div>
        <div class="col value" :title="infoForm.biddingToNegotiation">{{infoForm.biddingToNegotiation}}</div>
      </div>
      <page-title title="合同信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="合同编号">合同编号</div>
        <div class="col value firstCol" :title="infoForm.contractNumber">{{infoForm.contractNumber}}</div>
        <div class="col name firstCol" title="合同签订时间">合同签订时间</div>
        <div class="col value firstCol" :title="infoForm.contractSigningDate">{{infoForm.contractSigningDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="工期（服务期）起止时间">工期（服务期）起止时间</div>
        <div class="col value" :title="infoForm.projectPeriodStartDate">{{infoForm.projectPeriodStartDate}}</div>
        <div class="col name" title="合同价格（万元）">合同价格（万元）</div>
        <div class="col value" :title="infoForm.contractPrice">{{infoForm.contractPrice}}</div>
      </div>
      <div class="row">
        <div class="col name" title="其中备用金（万元）">其中备用金（万元）</div>
        <div class="col value" :title="infoForm.contingencyFund">{{infoForm.contingencyFund}}</div>
        <div class="col name" title="合同变更金额（万元）">合同变更金额（万元）</div>
        <div class="col value" :title="infoForm.contractAmendmentAmount">{{infoForm.contractAmendmentAmount}}</div>
      </div>
      <div class="row">
        <div class="col name" title="合同结算金额（万元）">合同结算金额（万元）</div>
        <div class="col value" :title="infoForm.contractSettlementAmount">{{infoForm.contractSettlementAmount}}</div>
        <div class="col name" title="合同是否履行完成">合同是否履行完成</div>
        <div class="col value" :title="infoForm.contractCompletion">{{infoForm.contractCompletion}}</div>
      </div>
      <div class="row">
        <div class="col name" title="合同会签发起时间">合同会签发起时间</div>
        <div class="col value" :title="infoForm.contractInitiationDate">{{infoForm.contractInitiationDate}}</div>
        <div class="col name" title="合同经办人员">合同经办人员</div>
        <div class="col value" :title="infoForm.contractHandler">{{infoForm.contractHandler}}</div>
      </div>
      <div class="row" style="padding-bottom: 20px">
        <div class="col name" title="单一来源理由及依据">单一来源理由及依据</div>
        <div class="col value" :title="infoForm.singleSourceReason">{{infoForm.singleSourceReason}}</div>
        <div class="col name" style="background: white"></div>
        <div class="col value"></div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import SupplierDetails from '/@/components/SupplierDetails/index.vue';
  import { getPreview, getProjectLedger, deleteTz } from '/@/api/supplierManage';
  import { getAppEnvConfig } from '/@/utils/env';
  import { downloadTemple, downloadErrorData } from '/@/api/fileApi';
  let formData = ref({
    year: [],
    targetCategory: [],
    professionalSection: [],
    planType: [],
    projectPhase: [],
    keyword: '',
    winBidStatus: null
  });
  let dataSource = ref([]);
  let columns = ref([
    {
      title: '序号',
      align: 'left',
      fixed: true,
      width: '70px',
      slots: { customRender: 'index' },
    },
    {
      title: '合同名称',
      dataIndex: 'planName',
      key: 'planName',
      align: 'left',
      width: '200px',
      fixed: true,
      slots: { customRender: 'planName' },
    },
    {
      title: '中标人',
      dataIndex: 'winningBidder',
      key: 'winningBidder',
      align: 'left',
      width: '200px',
      slots: { customRender: 'winningBidder' },
    },
    {
      title: '项目公司',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'left',
      width: '200px',
      slots: { customRender: 'companyName' },
    },
    {
      title: '中标/中选金额（万元）',
      dataIndex: 'winningAmount',
      key: 'winningAmount',
      align: 'left',
      width: '200px',
    },
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
      align: 'left',
      width: '200px',
    },
    {
      title: '专业板块',
      dataIndex: 'professionalSection',
      key: 'professionalSection',
      align: 'left',
      width: '200px',
    },
    {
      title: '合同类型',
      dataIndex: 'planType',
      key: 'planType',
      align: 'left',
      width: '200px',
    },
    {
      title: '是否为供应商短名单采购',
      dataIndex: 'onSupplierShortlist',
      key: 'onSupplierShortlist',
      align: 'left',
      width: '200px',
    },
    {
      title: '评审方式',
      dataIndex: 'evaluationMethod',
      key: 'evaluationMethod',
      align: 'left',
      width: '200px',
    },
    {
      title: '项目阶段',
      dataIndex: 'projectPhase',
      key: 'projectPhase',
      align: 'left',
      width: '200px',
    },
    // {
    //   title: '采购依据（立项）',
    //   dataIndex: 'procurementBasis',
    //   key: 'procurementBasis',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '标包名称',
    //   dataIndex: 'packageName',
    //   key: 'packageName',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '标的物类别',
    //   dataIndex: 'targetCategory',
    //   key: 'targetCategory',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '概（预）算金额（万元）',
    //   dataIndex: 'budgetAmount',
    //   key: 'budgetAmount',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '采购与招标管理机构',
    //   dataIndex: 'procurementAgencyType',
    //   key: 'procurementAgencyType',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '采购方式',
    //   dataIndex: 'procurementMethod',
    //   key: 'procurementMethod',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '采购代理机构名称',
    //   dataIndex: 'procurementAgencyName',
    //   key: 'procurementAgencyName',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '招标（非招标）编号',
    //   dataIndex: 'tenderNumber',
    //   key: 'tenderNumber',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '实际开标/询价/竞价/谈判时间',
    //   dataIndex: 'bidOpeningDate',
    //   key: 'bidOpeningDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '二次挂网时间',
    //   dataIndex: 'secondPostingDate',
    //   key: 'secondPostingDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '实际开标/询价/竞价/谈判时间',
    //   dataIndex: 'bidOpeningDate2',
    //   key: 'bidOpeningDate2',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '三次挂网时间',
    //   dataIndex: 'thirdPostingDate',
    //   key: 'thirdPostingDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '实际开标/询价/竞价/谈判时间',
    //   dataIndex: 'bidOpeningDate3',
    //   key: 'bidOpeningDate3',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '最高限价（万元）',
    //   dataIndex: 'maximumPrice',
    //   key: 'maximumPrice',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '首选中标人',
    //   dataIndex: 'firstChoiceBidder',
    //   key: 'firstChoiceBidder',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '备选中标人',
    //   dataIndex: 'secondChoiceBidder',
    //   key: 'secondChoiceBidder',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '排序第三候选人（如有）',
    //   dataIndex: 'thirdChoiceBidder',
    //   key: 'thirdChoiceBidder',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '定标时间',
    //   dataIndex: 'awardDate',
    //   key: 'awardDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '定标会议',
    //   dataIndex: 'awardMeeting',
    //   key: 'awardMeeting',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '是否有异议或投诉',
    //   dataIndex: 'objectionsOrComplaints',
    //   key: 'objectionsOrComplaints',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '中标通知书下发时间',
    //   dataIndex: 'awardNotificationDate',
    //   key: 'awardNotificationDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '中标/中选金额（万元）',
    //   dataIndex: 'winningAmount',
    //   key: 'winningAmount',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '中标人',
    //   dataIndex: 'winningBidder',
    //   key: 'winningBidder',
    //   align: 'left',
    //   width: '200px',
    //   slots: { customRender: 'winningBidder' },
    // },
    // {
    //   title: '是否招标转谈判采购',
    //   dataIndex: 'biddingToNegotiation',
    //   key: 'biddingToNegotiation',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同编号',
    //   dataIndex: 'contractNumber',
    //   key: 'contractNumber',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同签订时间',
    //   dataIndex: 'contractSigningDate',
    //   key: 'contractSigningDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '工期（服务期）起止时间',
    //   dataIndex: 'projectPeriodStartDate',
    //   key: 'projectPeriodStartDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同价格（万元）',
    //   dataIndex: 'contractPrice',
    //   key: 'contractPrice',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '其中备用金（万元）',
    //   dataIndex: 'contingencyFund',
    //   key: 'contingencyFund',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同变更金额（万元）',
    //   dataIndex: 'contractAmendmentAmount',
    //   key: 'contractAmendmentAmount',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同结算金额（万元）',
    //   dataIndex: 'contractSettlementAmount',
    //   key: 'contractSettlementAmount',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同是否履行完成',
    //   dataIndex: 'contractCompletion',
    //   key: 'contractCompletion',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同会签发起时间',
    //   dataIndex: 'contractInitiationDate',
    //   key: 'contractInitiationDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '合同经办人员',
    //   dataIndex: 'contractHandler',
    //   key: 'contractHandler',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '工期（服务期）起止时间',
    //   dataIndex: 'projectPeriodStartDate',
    //   key: 'projectPeriodStartDate',
    //   align: 'left',
    //   width: '200px',
    // },
    // {
    //   title: '单一来源理由及依据',
    //   dataIndex: 'singleSourceReason',
    //   key: 'singleSourceReason',
    //   align: 'left',
    //   width: '200px',
    // },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: '160px',
      slots: { customRender: 'operation' },
      align: 'center',
      fixed: 'right',
    },
  ]);
  let tzInfo = ref({ total: 0, targetCategoryCounts: [] });
  let pageForm = ref({
    size: 50,
    limit: 1,
    total: 0,
  });
  function changePage(val) {
    pageForm.value.limit = val;
    // todo
    getData();
  }
  // 获取项目台账统计信息
  async function getTZinfo() {
    const res = await getPreview();
    tzInfo.value = res;
  }
  async function getData() {
    let queryData = {
      // year: formData.value.year,
      year: formData.value.year ? formData.value.year.toString() : '',
      targetCategory: formData.value.targetCategory ? formData.value.targetCategory.toString() : '',
      professionalSection: formData.value.professionalSection
        ? formData.value.professionalSection.toString()
        : '',
      planType: formData.value.planType ? formData.value.planType.toString() : '',
      projectPhase: formData.value.projectPhase ? formData.value.projectPhase.toString() : '',
      winBidStatus: formData.value.winBidStatus,
      // targetCategory: formData.value.targetCategory,
      // professionalSection: formData.value.professionalSection,
      // planType: formData.value.planType,
      // projectPhase: formData.value.projectPhase,
      keyword: formData.value.keyword,
      limit: pageForm.value.limit,
      size: pageForm.value.size,
    };
    const res = await getProjectLedger(queryData);
    dataSource.value = res.list.map((item) => {
      const obj = { ...item };
      for (let key in obj) {
        if (obj[key] === null || obj[key] === undefined) {
          obj[key] = '-';
        }
      }
      return obj;
    });
    pageForm.value.total = res.total;
  }
  getTZinfo();
  getData();
  function searchData() {
    pageForm.value.limit = 1;
    getData();
  }
  // 批量上传
  let isShowUpload = ref(false); // 是否打开批量监控弹窗
  function openUpload() {
    isShowUpload.value = true;
    titleContent.value = '确定导入';
    isUploadState.value = 0;
    fileData = null;
    fileList.value = [];
  }
  let fileList = ref([]) as any;
  let titleContent = ref('确定导入');
  // 下载纪录
  async function downloadData() {
    let res = await downloadTemple('供应商台账导入模板.xlsx');
    let url = window.URL.createObjectURL(res.data);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.download = '供应商台账导入模板.xlsx';
    link.href = url;
    document.body.appendChild(link);
    link.click();
  }
  let fileData = null;
  const handleChange = (file: any) => {
    fileData = file;
    fileList.value = [file];
    return false;
  };
  const removeFile = () => {
    fileList.value = [];
    fileData = null;
  };
  let isUploadState = ref(0);

  async function saveUpload() {
    if (!fileData) {
      return message.warn('请选择要上传的文件');
    }
    let action = getAppEnvConfig().VITE_GLOB_API_URL + '/ledger/project-ledger/import';
    const formData = new FormData();
    formData.append('file', fileData);
    const xhr = new XMLHttpRequest();
    xhr.open('post', action, true);
    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
    xhr.onload = () => {
      const response = JSON.parse(xhr.response);
      if (response.code === 0) {
        message.success('导入成功');
        isUploadState.value = 1;
        fileId = response.data.errorFileId;
        errorNum = response.data.errorCount;
        uploadData.value = response.data.excelData.rows;
        columnsByUpload.value = response.data.excelData.head;
        isShowUpload.value = false;
        if (errorNum > 0) {
          openUploadDetails();
        }
      }
      if (response.code === 500 || response.code === 400) {
        message.error(response.msg);
        titleContent.value = '重新上传';
        isUploadState.value = 2;
        fileData = null;
        fileList.value = [];
      }
    };
    xhr.onerror = () => {
      console.log('上传失败');
    };
    xhr.ontimeout = function timeout() {
      console.log('上传超时');
    };
    xhr.send(formData);
  }
  let isShowDetails = ref(false);
  let companyId = ref('');
  function openDetails(id: string) {
    if (id === '-') {
      return message.warning('未查到该公司详情');
    }
    companyId.value = id;
    isShowDetails.value = true;
  }
  function goBack() {
    isShowDetails.value = false;
  }
  let isShowBtn = ref(false);
  function toLeft() {
    let scrollLeft = document.getElementById('info-listData')?.scrollLeft;
    document.getElementById('info-listData').scrollTo(scrollLeft - 182, 0);
  }
  function toRight() {
    let scrollLeft = document.getElementById('info-listData')?.scrollLeft;
    document.getElementById('info-listData').scrollTo(scrollLeft + 182, 0);
  }
  // 判断是否需要展示按钮
  function checkShow() {
    let doc = document.getElementById('info-listData');
    isShowBtn.value = doc.scrollWidth > doc.clientWidth;
  }
  onMounted(() => {
    checkShow();
  });
  // 批量导入数据详情
  let isUploadDetails = ref(false);
  let uploadData = ref([]);
  let columnsByUpload = ref([]);
  let fileId = '';
  let errorNum = 0;
  // 打开窗口
  const openUploadDetails = () => {
    isUploadDetails.value = true;
  };
  // 关闭窗口
  const closeUploadDetails = () => {
    isUploadDetails.value = false;
  };
  // 下载错误数据
  const downErrorData = async () => {
    if (!errorNum) {
      message.warning('无错误数据');
      return;
    }
    let res = await downloadErrorData(fileId);
    let url = window.URL.createObjectURL(res.data);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.download = '项目采购台账导入错误数据.xlsx';
    link.href = url;
    document.body.appendChild(link);
    link.click();
  };
  // 删除
  let isShowDelBox = ref(false);
  let delId = ref(0);
  const openDelBox = (e: any) => {
    delId.value = e.id;
    isShowDelBox.value = true;
  };
  const handleOk = async () => {
    await deleteTz(delId.value);
    isShowDelBox.value = false;
    getData();
    getTZinfo();
  };
  const getName = (name) => {
    if (formData.value.keyword.trim()) {
      return name.replaceAll(
        formData.value.keyword.trim(),
        `<span style="color: red;">${formData.value.keyword.trim()}</span>`,
      );
    }
    return name;
  };
  let isShowInfo = ref(false)
  let infoForm = ref()
  const openInfoBox = (e: any) => {
    isShowInfo.value = true
    infoForm.value = e
  }
</script>
<style lang="less" scoped>
  :deep(.detail-a-table__main) {
    .ant-table-thead {
      .ant-table-cell {
        padding-left: 16px;
        padding-right: 16px;
      }
    }
    .ant-table-tbody {
      .ant-table-cell {
        padding-left: 16px;
        padding-right: 16px;
      }
    }
  }
  :deep(.collaboration-a-select) {
    margin-right: 8px;
    .ant-select-selector {
      min-height: 32px;
    }
  }
  .collaboration-a-input {
    margin-left: 0px !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
  }
  .collaborationLedger {
    .info-div {
      padding: 0 52px;
      position: relative;
      width: 100%;
      height: 98px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      .info-left {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        &:active {
          opacity: 0.8;
        }
      }
      .info-listData::-webkit-scrollbar {
        height: 0 !important;
      }
      .info-listData {
        display: flex;
        width: 100%;
        overflow-x: scroll;
        .info-item {
          min-width: 170px;
          height: 66px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          margin-right: 12px;
          display: flex;
          .info-icon {
            margin-right: 12px;
            margin-left: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          .info-info {
            height: 100%;
            padding: 8px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
              font-size: 14px;
              color: #606266;
            }
            .value {
              font-size: 20px;
              font-weight: 500;
              color: #303133;
            }
          }
        }
      }
      .info-right {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: rotate(180deg) translateY(50%);
        &:active {
          opacity: 0.8;
        }
      }
    }
    .searchDiv {
      margin-bottom: 16px;
      .exportBtn {
        float: right;
        border: 1px solid #1473dc;
        width: 88px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 14px;
        font-weight: 500;
        color: #1473dc;
        cursor: pointer;
      }
    }
  }
  .my-upload {
    padding: 0 20px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .upload-click {
      font-size: 14px;
    }
    img {
      margin: 0 auto;
    }
  }
  .tips {
    margin-top: 12px;
    padding: 0 20px;
    .tipsItem {
      font-size: 12px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: -0.01px;
      color: #606266;
      display: flex;
      .downloadBtn {
        width: fit-content;
        height: 24px;
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 2px 8px;
        box-sizing: border-box;
        border: 1px solid #1473dc;
        margin-left: 8px;
        font-size: 12px;
        line-height: 24px;
        color: #1473dc;
        img {
          margin-right: 5px;
        }
      }
    }
  }
  :deep(.ant-select-multiple .ant-select-selector:after) {
    content: '' !important;
  }
  .myTableClass {
    padding: 10px;
    width: 100%;
    max-height: 750px;
    overflow: auto;
    box-sizing: border-box;
    .myHead {
      display: flex;
      background: #f5f7fa;
      width: fit-content;
    }
    .myRow {
      display: flex;
      border-top: 1px solid #ebeef5;
      width: fit-content;
    }
    .myRow:last-child {
      border-bottom: 1px solid #ebeef5;
    }
    .myCol {
      width: 150px;
      text-align: left;
      padding: 10px 8px;
      color: #303133;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .myCol.active {
      color: #c11a20;
    }
  }
  .footerBtn {
    float: right;
    margin: 10px 20px 20px;
  }
  .myFixed1 {
    //position: fixed;
    width: calc(100% - 7px);
    //box-sizing: border-box;
    //top: 0px;
    z-index: 10;
  }
  .myFixed {
    position: fixed;
    z-index: 10;
    width: calc(100% - 258px);
    background: #ffffff;
  }
  .row{
    width:  100%;
    padding: 0 20px;
    display: flex;
    .col{
      height: 38px;
      line-height: 38px;
      padding: 0 20px;
      border-bottom: 1px solid #dcdfe6;
    }
    .col.name{
      width:  20%;
      background: rgb(220, 238, 255);
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 超出容器部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
    .col.value{
      width: 30%;
      border-right: 1px solid #dcdfe6;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 超出容器部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
    .col.firstCol{
      border-top: 1px solid #dcdfe6;
    }
  }
</style>
